<template>
  <view class="dongtai-body">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed>wode动态</tn-nav-bar> -->
	<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" v-if="dongtaiList.length">
	   
	  <!-- 图文信息 -->
	  <block v-for="(item,index) in dongtaiList" :key="index">
	    <view class="blogger__item">
	      <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center tn-padding-bottom-sm">
	  			<text class="tn-text-bold">{{item.createUserName}}</text>	 <text>{{item.createdTime}}</text>
	      </view>
	     
	      <view class="blogger__desc tn-text-justify tn-flex-col-center tn-flex-row-left">
	  			  <tn-read-more :closeBtn="true" :showHeight="220">
	  			    <rich-text :nodes="item.content"></rich-text>
	  			  </tn-read-more>
	      </view>
	      
	      <block v-if="item.images">
	        <view v-if="[1,2,4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
	          <image v-for="(image_item,image_index) in item.images" :key="image_index"  @click="showImage(image_item)"
	            class="blogger__main-image"
	            :class="{
	              'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
	              'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
	            }"
	            :src="image_item.src"
	            mode="aspectFill"
	          ></image>
	        </view>
	        <view v-else class="tn-padding-top-xs">
	          <tn-grid  hoverClass="none" :col="3">
	            <block v-for="(image_item,image_index) in item.images" :key="image_index">
	              <!-- #ifndef MP-WEIXIN -->
	              <tn-grid-item style="width: 30%;margin: 10rpx;">
	                <image
	                  class="blogger__main-image blogger__main-image--3" @click="showImage(image_item)"
	                  :src="image_item.src"
	                  mode="aspectFill"
	                ></image>
	              </tn-grid-item>
	              <!-- #endif-->
	              <!-- #ifdef MP-WEIXIN -->
	              <tn-grid-item style="width: 30%;margin: 10rpx;">
	                <image
	                  class="blogger__main-image blogger__main-image--3" @click="showImage(image_item)"
	                  :src="image_item.src"
	                  mode="aspectFill"
	                ></image>
	              </tn-grid-item>
	              <!-- #endif-->
	            </block>
	          </tn-grid>
	        </view>
	      </block>
	    </view>
	     
	    <view class="action_da_item">
	      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
	        <view class="justify-content-item tn-flex tn-flex-col-center">
	  				<!-- <text class="blogger__count-icon tn-icon-share"></text> 
	          <text class="tn-color-gray">分享</text> -->
	        </view>
	        <view class="justify-content-item tn-color-gray tn-text-center">
	          <view class="">
	            <text class="blogger__count-icon tn-icon-delete" @touchend="deleteDongtai(item)"></text> 
	  				<span class="tn-padding-left-sm"></span>
	            <!-- <text class="blogger__count-icon tn-icon-message" @touchend="pinglunfunc($event ,item)"></text>
	            <text v-if="item.leaveMessages.length" class="tn-padding-right msg-count-text">{{ item.leaveMessages.length }}</text> -->
	          </view>
	        </view>
	      </view>
	  		</view>
	  		
			
			<view class="blogger__item" style="padding-top: 0;padding-bottom: 0;" v-if="item.likeUsers&&item.likeUsers.length">
				<view class="" style=" background-color:#eeeeee;">
					
					<text class="blogger__count-icon tn-icon-like tn-padding-left-sm tn-color-red" ></text> 
					<text class="" v-for="(dianzanren, dianzanrenIndex) in item.likeUsers" :key="dianzanrenIndex">{{dianzanren}}
						<text v-if="dianzanrenIndex < item.likeUsers.length-1">,</text>
					</text>
				</view>
			</view>
	  		
	  		<!-- 评论 -->
	    <view class="blogger__item" v-if="item.leaveMessages.length">
	  		<view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm" v-for="(pinlunitem, pinlinIndex) in item.leaveMessages" :key="pinlinIndex">
	  		    <view class="justify-content-item">
	  		      <view class="tn-flex tn-flex-col-center tn-flex-row-left">
	  		        <view class="tn-padding-right tn-padding-left-sm">
	  		          <view class="tn-padding-right tn-text-df tn-color-black">
	  		            {{pinlunitem.leaveMessageUserName}}: <span class="tn-color-gray margin-left-sm">{{pinlunitem.leaveMessageContent}}</span> 
	  		          </view>
	  		        </view>
	  		      </view>
	  		    </view>
	  		  </view>
	  		</view>
	  		</view>
	    
	    <!-- 边距间隔 -->
	    <view class="tn-strip-bottom" v-if="index != dongtaiList.length - 1"></view>
	  </block>
	  
	</view>
    <!-- 回到首页悬浮按钮-->
    <!-- <nav-index-button></nav-index-button> -->
	<!-- <tn-button class="fabu__btn" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-camera"></text></tn-button> -->
    
    <view class=" tn-flex tn-flex-row-center fullhouse" v-else>
    	<tn-empty mode="data"></tn-empty>
    </view>
    <tn-popup
      v-model="showtnpopup"
      length="50%"
      mode="bottom"
      height="10%"
    >
      <view class="popup-content">
		  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
		    <view class="content__data tn-flex-1">
		      <tn-input type="text" placeholder="请输入内容" v-model="pinglunneirong" border borderColor="#01BEFF"></tn-input>
		    </view>
		    <view class="content__title fasong__view" @click="fasongpinglun">发送</view>
		  </view>
      </view>
    </tn-popup>
	
	<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
		<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
		<text class="tn-icon-close" @click="previewImg=''"></text>
	</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
  </view>
</template>

<script>
  export default {
    name: 'wodedongtai',
    data(){
      return {
		  showtnpopup: false,
		  currentPinlunItem: null,
		  pinglunneirong: '',
		    // 内容默认隐藏显示的高度
		    contentHideShowHeight: 0,
		    userInfo: {
		      avatar: [
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_1.jpeg',
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_2.jpeg',
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_3.jpeg',
		      ],
		      username: '图鸟北北',
		      desc: ''
		    },
		    tipsDataMessage: {
		      latestMessageUserAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
		      messageCount: 3,
		      likeCount: 1290,
		      hotReviewsCount: 896,
		      fansCount: 962,
		      focusCount: 86
		    },
		    dongtaiList: [
		    ],
			pageIndex: 1,
			totalPage: 0,
			imageTitle: '',
			previewImg: '',
      }
    },
	mounted() {
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		this.getdongtai();
	},
    methods: {
      pinglunfunc(e, item){
		  this.currentPinlunItem = item;
		  this.showtnpopup = true;
	  },
	  closedPopup(){
		  this.currentPinlunItem = null;
			this.pinglunneirong = '';
		  console.log('guanbi l 弹框---------',this.currentPinlunItem, '-------', this.pinglunneirong)
	  },
	  fasongpinglun(){
		if(this.currentPinlunItem){
			this.currentPinlunItem.pinglun.push({
				name: '一只鸡',
				pingluncontent: '我会打篮球   '+this.pinglunneirong
			})
		}
		this.pinglunneirong = '';
		this.showtnpopup = false;
	  },
	  gofabu(){
		  uni.navigateTo({
		  	url: '/pages/banjidongtai/fabu'
		  })
	  },
	  getdongtai(){
	  	if(this.totalPage > 0 && this.pageIndex > this.totalPage){
	  		this.$refs.toast.show({
	  		  title: '',
	  		  content: '没有更多了',
	  		  icon: '',
	  		  image: '',
	  		  duration: 1000
	  		})
	  		return;
	  	}
	  	this.request({
	  		url: '/ClassDynamic/MoveMyClassDynamicGetPage',
	  		method: 'get',
	  		params: {
	  			pageNo: this.pageIndex,
	  			pageSize: 10
	  		},
	  	}).then(res => {
	  		if(res.code == 200){
	  			if(this.pageIndex == 1){
	  				this.dongtaiList = [];
	  			}
	  			let rows = res.data.rows;
	  			this.totalPage = res.data.totalPage;
	  			rows.forEach(item => {
	  				if(item.images && item.images.length){
	  					item.images.forEach(_img => {
	  						_img['src'] = this.imageTitle + _img.filedId;
	  					})
	  					
	  				}
	  				this.dongtaiList.push(item);
	  			})
	  			uni.stopPullDownRefresh()
	  		}
	  	})
	  },
	  deleteDongtai(item){
		  ///ClassDynamic/Delete
		  let arr = [item.id]
		  this.request({
		  	url: '/ClassDynamic/Delete',
		  	method: 'post',
		  	params: arr,
		  }).then(res => {
		  	if(res.code == 200){
		  		this.pageIndex == 1
				this.getdongtai();
		  	}
		  })
	  },
			showImage(item){
				this.previewImg = item.src;
			},
    }
  }
</script>

<style lang="scss" scoped>
	.dongtai-body{
	}
	.image-pic{
		width: 100%;
		height: 400rpx;
	}
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  $cube-size: 120rpx;
  $cube-split: 60rpx;
  
  /* 立体头像 start*/
  
  .cube {
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    height: 550rpx;
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    align-items: center;
    font-weight: 300;
    
    &__container {
      margin-top: 180rpx;
      position: relative;
      width: $cube-size;
      height: $cube-size;
      -webkit-perspective: 500px;
      perspective: 500px;//透视太大会超过屏幕就不好了吖
      
      &:before {
        content: '';
        width: $cube-size;
        height: $cube-size;
        position: absolute;
        // top: calc(50% - ($cube-split - 30px));
        // left: calc(50% - $cube-split);
        background-color: #3c6496;
        filter: blur(60px);
        opacity: .8;
      }
      
      &__body {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-75px);
        animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
        will-change: transform;
        
        &__item {
          position: absolute;
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          width: $cube-size;
          height: $cube-size;
          font-size: 30px;
          background-repeat: no-repeat;
          background-size: cover;
          
          &--front {
            transform: rotateY(0deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
          &--back {
            transform: rotateX(180deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
          &--right {
            transform: rotateY(90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
          &--left {
            transform: rotateY(-90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
          &--top {
            transform: rotateX(90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
          &--bottom {
            transform: rotateX(-90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
        }
      }
    }
  }
  
  @keyframes cubeFrame {
    10% {
      transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
    }
    15% {
      transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
    }
    20% {
      transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
    }
    30% {
      transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
    }
    40% {
      transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
    }
    45% {
      transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
    }
    55% {
      transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
    }
    60% {
      transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
    }
    70% {
      transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
    }
    80% {
      transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
    }
    90% {
      transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
    }
    100% {
      transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
    }
  }
  /* 立体头像 end*/
  
  /* 信息提示 start */
  .blogger-tips-data {
    background-color: #F8F7F3;
    
    &__wrap {
      border-radius: 60rpx 60rpx 0 0;
    }
    
    &__message {
      padding-top: 60rpx;
      
      &__container {
        padding: 5rpx;
        border-radius: 100rpx;
      }
      
      &__avatar {
        margin: 6rpx 0 0 6rpx;
      }
    }
    
    &__info {
      padding: 40rpx 0 0 0;
    }
  }
  /* 信息提示 end */
  
  /* 文章内容 start*/
  .blogger {
    &__item {
      padding: 30rpx;
    }
    
    &__author {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__desc {
      line-height: 55rpx;
      
      &__label {
        padding: 0 20rpx;
        margin: 0rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      &__content {
        
      }
    }
    
    &__content {
      margin-top: 18rpx;
      padding-right: 18rpx;
      
      &__data {
        line-height: 46rpx;
        text-align: justify;
        overflow: hidden;
        transition: all 0.25s ease-in-out;
      }
      
      &__status {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #82B2FF;
      }
    }
    
    &__main-image {
      border-radius: 16rpx;
      
      &--1 {
        max-width: 80%;
        max-height: 300rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
    
    &__ad {
      width: 100%;
      height: 500rpx;
      transform: translate3d(0px, 0px, 0px) !important;
      
      ::v-deep .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      
      &__item {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: translate3d(100%, 0px, 0px) scale(1) !important;
        transition: transform 0.25s ease-in-out;
        z-index: 1;
        
        &--0 {
          transform: translate3d(0%, 0px, 0px) scale(1) !important;
          z-index: 4;
        }
        &--1 {
          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
          z-index: 3;
        }
        &--2 {
          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
          z-index: 2;
        }
      }
      
      &__content {
        border-radius: 40rpx;
        width: 640rpx;
        height: 500rpx;
        overflow: hidden;
      }
      
      &__image {
        width: 100%;
        height: 100%;
      }
    }
  }
  /* 文章内容 end*/
   
   /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
  /* 底部悬浮按钮 start*/ 
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
  /* 广告内容 start */
  .ad-image{
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }
  .ad-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 20%;
  }
  /* 自定义导航栏内容 end */
  
  /* 悬浮 */
  .tnxuanfu{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
  /* 悬浮按钮 */
  .button-shop {
    width: 90rpx;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    position: fixed;
    /* bottom:200rpx;
      right: 20rpx; */
    left: 5rpx;
    top: 5rpx;
    z-index: 1001;
    border-radius: 100px;
    opacity: 0.9;
  }
  
  
  /* 按钮 */
  .edit {
    bottom: 300rpx;
    right: 75rpx;
    position: fixed;
    z-index: 9999;
  }
  
  
  .pa,
  .pa0 {
    position: absolute
  }
  
  .pa0 {
    left: 0;
    top: 0
  }
  
  
  .bg0 {
    width: 100rpx;
    height: 100rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bg1 {
    width: 100%;
    height: 100%;
  }
  
  
  
  
  .hx-box {
    top: 50%;
    left: 50%;
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  }
  
  .hx-box .pr {
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    animation: hxz 20s linear infinite;
  }
  
  @keyframes hxz {
    0% {
      transform: rotateX(0deg);
    }
  
    100% {
      transform: rotateX(-360deg);
    }
  }
  
  
  
  .hx-box .pr .pa0 {
    width: 100rpx;
    height: 100rpx;
    /* border: 4px solid #5ec0ff; */
    border-radius: 1000px;
  }
  
  .hx-box .pr .pa0 .span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite;
  }
  
  @keyframes hx {
    to {
      transform: rotate(360deg);
    }
  }
  
  .hx-k1 {
    transform: rotateX(-60deg) rotateZ(-60deg)
  }
  
  .hx-k2 {
    transform: rotateX(-30deg) rotateZ(-30deg)
  }
  
  .hx-k3 {
    transform: rotateX(0deg) rotateZ(0deg)
  }
  
  .hx-k4 {
    transform: rotateX(30deg) rotateZ(30deg)
  }
  
  .hx-k5 {
    transform: rotateX(60deg) rotateZ(60deg)
  }
  
  .hx-k6 {
    transform: rotateX(90deg) rotateZ(90deg)
  }
  .margin-left-sm{
	  margin-left: 8px;
  }
  .fasong__view{
	  padding: 0 10px;
  }
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
  .action_da_item{
	padding: 2px 16px;  
  }
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(255, 255, 255, 1);
		  .tn-icon-close{
			  position: absolute;
			  top: 10px;
			  right: 10px;
			  font-size: 36rpx;
			  z-index: 888;
		  }
	  }
</style>
